<template>
  <div class="six flex_column">
    <everyHorn />
    <div class="tital_home">
      <img src="@/assets/img/home-page/six_title.png" alt="">
      <h2>本月订单情况</h2>
    </div>
    <div v-if="btnSix" class="main flex_1">
      <div class="top">
        <p class="text">今日订单量:<span class="num num-max green">
          <!-- <span>{{ chartData.goodsNumberDay }}</span> -->
          <animate-number :key="chartData.goodsNumberDay" from="0" :to="chartData.goodsNumberDay" duration="3000" />
        </span></p>
        <p class="text">本月订单量:<span class="num gray">
          <animate-number :key="chartData.goodsNumberMonth" from="0" :to="chartData.goodsNumberMonth" duration="3000" />
        </span></p>
        <p class="text">已出库订单量:<span class="num gray">
          <animate-number :key="chartData.goodsNumberOutMonth" from="0" :to="chartData.goodsNumberOutMonth" duration="3000" />
        </span></p>
      </div>
      <div id="orderChart" class="chart" />
    </div>
    <div v-else class="main flex_1 flex_column flex_center">
      暂无权限
    </div>
  </div>
</template>

<script>

import everyHorn from './every_horn.vue'
import '@/assets/js/echarts-liquidfill.min.js'
import { authoritymanagement } from '@/assets/js/utils.js'
const echarts = require('echarts')
var myChart // 全局定义变量
export default {
  name: '',
  components: {
    everyHorn
  },
  data() {
    return {
      btnSix: '', // 查看权限
      setInterval: '', // 定时器
      chartData: {
        brandList: [],
        customerList: [],
        goodsNumberDay: 0,
        goodsNumberMonth: 0,
        goodsNumberOutMonth: 0
      }
    }
  },
  async created() {
    // this.init()
    // 获取当前登录人权限
    let RoleCode = this.$getLocalItem('jx_RoleCode')
    this.btnSix = authoritymanagement(RoleCode, 'lypc_btn_btnSix')
    if (this.btnSix) {
      await this.getData()
    }
  },
  // 清除定时器
  beforeDestroy() {
    clearInterval(this.setInterval)
  },
  methods: {
    init() {
      this.drawChart()
    },
    async getData() {
      let res = await this.$API.homePage.reqOrderHome()
      if (res) {
        this.chartData = this.$uDeepClone(res.responseBody)
        if (res.responseBody.customerList.length >= 5) {
          this.chartData.customerList = this.chartData.customerList.splice(0, 5)
        } else {
          for (let i = 0; i < 5 - res.responseBody.customerList.length; i++) {
            this.chartData.customerList.push({
              customerName: '-',
              amount: 0
            })
          }
        }
        if (res.responseBody.brandList.length >= 5) {
          this.chartData.brandList = this.chartData.brandList.splice(0, 5)
        } else {
          for (let i = 0; i < 5 - res.responseBody.brandList.length; i++) {
            this.chartData.brandList.push({
              breadName: '-',
              amount: 0
            })
          }
        }
        this.init()
      }
    },
    drawChart() {
      const self = this
      let option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.8)',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params, ticket, callback) {
            // const item = params[1];
            const index = parseInt(params[0].dataIndex)
            let s = '排名:' + (index + 1) + '<br/>'
            s += self.chartData.customerList[index].customerName + ':' + self.chartData.customerList[index].amount + '元<br/>'
            s += self.chartData.brandList[index].breadName + ':' + self.chartData.brandList[index].amount + '元'
            return s
          }
        },
        legend: {
          data: ['客户落单', '品牌出库'],
          right: '10',
          align: 'left',
          top: '2%',
          textStyle: {
            color: '#fff'
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35
        },
        grid: {
          left: '3%',
          right: '40',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          name: '排名',
          data: ['1', '2', '3', '4', '5'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#00c7ff'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          name: '金额/元',
          axisLabel: {
            // formatter: '{value}'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#0F55B9'
            }
          }
        }],
        series: [{
          name: '客户落单',
          type: 'bar',
          data: this.chartData.customerList.map(v => { return v.amount }),
          barWidth: 16, // 柱子宽度
          barGap: 1, // 柱子之间间距
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00C7E1'
              }, {
                offset: 1,
                color: '#005193'
              }]),
              opacity: 1,
              barBorderRadius: 12
            }
          }
        }, {
          name: '品牌出库',
          type: 'bar',
          data: this.chartData.brandList.map(v => { return v.amount }),
          barWidth: 16,
          barGap: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00da9c'
              }, {
                offset: 1,
                color: '#007a55'
              }]),
              opacity: 1,
              barBorderRadius: 12
            }
          }
        }]
      }
      this.drawEcharts('orderChart', option)
    },
    // Echarts绘图
    drawEcharts(id, option) {
      if (myChart != null && myChart != '' && myChart != undefined) {
        myChart.dispose()// 销毁
      }
      myChart = echarts.init(document.getElementById(id)) // echartsExample是显示echart的元素id
      myChart.setOption(option)
      // this.loading = false
      let idx = 1
      this.setInterval = setInterval(() => {
        console.log('six setInterval1 timer execute')
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: idx
        })
        idx++
        if (idx >= 5) {
          idx = 0
        }
      }, 2000)
      return myChart
    }
  }
}
</script>

<style lang="scss" scoped>
.six {
  width: 402px;
  height: 345px;
  background-image: url('~@/assets/img/home-page/six.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .main {
    display: flex;
    flex-direction: column;
    .top {
      flex: 1;
      display:flex;
      height: 100%;
      padding: 0 10px;
      justify-content: space-evenly;
      .text {
        line-height: 40px
      }
      .num {
        font-size: 20px;
        font-weight: bold;
        padding-left: 10px;
        color: rgb(187, 230, 224);
      }
      // .num-max {
      //   font-size: 24px;
      // }
    }
    .chart {
      width: 400px;
      height: 250px;
    }
  }
}
</style>
